<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>好友详情</template>
            <template #right><i class="iconfont icon-gengduo" @click="$router.push('/setInformation')"></i></template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 骨架屏区域开始 -->
        <template v-if="isSkeleton">
            <!-- 信息骨架屏区域 -->
            <div class="skeleton-wrap">
                <van-skeleton>
                    <template #template>
                        <div class="info-box">
                            <div class="info-left">
                                <van-skeleton-paragraph style="width: 60px;height: 60px;border-radius: 5px;margin-right: 10px;"/>
                            </div>

                            <div class="info-right">
                                <div class="text">
                                    <van-skeleton-paragraph row-width="40%" style="height: 25px;"/>
                                    <van-skeleton-paragraph row-width="30%" style="margin-top: 10px;"/>
                                    <van-skeleton-paragraph row-width="50%" style="margin-top: 10px;"/>
                                    <van-skeleton-paragraph row-width="60%" style="margin-top: 10px;"/>
                                </div>
                                <div class="star">
                                    <van-skeleton-paragraph row-width="60%"/>
                                </div>
                            </div>
                        </div>
                    </template>
                </van-skeleton>
            </div>

            <!-- 单元格骨架屏区域 -->
            <div class="skeleton-cell-wrap" v-for="(item) in 5" :key="item">
                <van-skeleton>
                    <template #template>
                        <div class="cell-box">
                            <van-skeleton-paragraph row-width="20%" style="height: 25px;"/>
                            <van-skeleton-paragraph row-width="20%" style="height: 25px;"/>
                        </div>
                    </template>
                </van-skeleton>
            </div>

            <!-- 操作骨架屏区域 -->
            <div class="skeleton-opt-wrap">
                <van-skeleton>
                    <template #template>
                        <van-skeleton-paragraph style="height: 50px;margin-top: 10px;"/>
                    </template>
                </van-skeleton>

                <van-skeleton>
                    <template #template>
                        <div class="skeleton-opt">
                            <van-skeleton-paragraph style="height: 50px;margin-top: 10px;"/>
                        </div>
                    </template>
                </van-skeleton>
            </div>
        </template>
        <!-- 骨架屏区域结束 -->

        <template v-if="friend">
            <!-- 信息区域开始 -->
            <div class="info-wrap">
                <div class="left-box">
                    <van-image
                        width="50"
                        height="50"
                        :src="friend?.info.avatar_url ? global.MINIO_FILE_DOMAIN + friend?.info.avatar_url : 'src/assets/images/default_avatar.png'"
                        fit="contain"
                    />
                </div>
                <div class="middle-box">
                    <p class="username-panel">
                        <span>{{friend?.info.username}}</span>
                        <i class="iconfont icon-nan" v-if="friend?.info.gender == 1"></i>
                        <i class="iconfont icon-nv" v-else></i>
                    </p>
                    <p class="nick">昵称：{{friend?.info.nick}}</p>
                    <p class="nick">电话：{{friend?.info.mobile}}</p>
                    <p class="region">地区：{{ friend.info.region }}</p>
                </div>

                <!-- 星标区域开始 -->
                <div class="right-box">
                    <i class="iconfont icon-shoucang" v-if="information?.is_asterisk == '1'" @click="handleEditAsterisk('0')"></i>
                    <i class="iconfont icon-shoucang1" v-else @click="handleEditAsterisk('1')"></i>
                </div>
            </div>
            <!-- 信息区域结束 -->

            <!-- 面板栏区域开始 -->
            <div class="panel-wrap">
                <template v-for="(item, index) in panels" :key="index">
                    <TridentCellItem :item="item" :value="item.value" v-if="index == 0" is-link @click="handleShowEditAlias"/>
                    <TridentCellItem v-if="index > 0 && item.url" :item="item" :is_arrows="item.is_arrows" @click="$router.push(item.url)"/>
                </template>

                <!-- 提醒 -->
                <div class="operate-item">
                    <div class="left">拉黑</div>
                    <div class="right">
                        <van-switch v-model="isBlacklist" active-color="#27BA9B" inactive-color="#dcdee0" size="18px" @change="handleBlacklist"/>
                    </div>
                </div>
            </div>
            <!-- 面板栏区域结束 -->
        </template>

        <!-- 操作区域开始 -->
        <div class="opt-wrap" v-if="friend">
            <div class="item-box" @click="$router.push('/chat?is_open=1&mode=1&id=' + friend?.id)">
                <i class="iconfont icon-liaotian"></i>
                <span>发消息</span>
            </div>

            <!-- 按钮区域开 -->
            <div class="btn-box">
                <van-button block type="warning" @click="handleRemoveFriend">删除好友</van-button>
            </div>
        </div>
        <!-- 操作区域结束 -->

        <!-- 编辑别名弹层开始 -->
        <van-popup
            v-model:show="popupAlias"
            position="bottom"
            closeable
            :style="{ height: '20%' }"
        >
            <div class="popup-wrap">
                <div class="title-box">编辑别名</div>
                <van-field v-model="aliasName" label="好友别名" placeholder="请输入别名" />
                <div class="btn-box">
                    <van-button block color="#27BA9B" type="primary" size="small" @click="handleEditAlias">保存</van-button>
                </div>
            </div>
        </van-popup>
        <!-- 编辑别名弹层结束 -->
    </div>
</template>

<script lang="ts" setup>
import { reqBlacklistFriendAPI, reqDeleteFriendAPI, reqEditFriendAPI, reqFriendDetailAPI } from '@/apis/friend'
import { useUserStore } from '@/store/modules/user'
import type { Alias, Friend, Information } from '@/types/friend'
import type { CellItem } from '@/types/global'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { inject, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'


// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global: any = inject('global')

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 用户存储
const userStore = useUserStore()

// 单元格
const panels = ref<CellItem[]>([])

// 骨架屏
const isSkeleton = ref<boolean>(false)
// ----------------- 定义全局变量结束 -----------------


// 挂载页面完成
onMounted(async () => {
    await getFriendInfo()

    // 筛选好友别名
    let alias = ''
    friend.value?.alias.forEach(value => {
        if (value.uid != userStore.profile.user.uid) {
            alias = value.name
        } else {
            myAlias.value = value
        }
    });

    aliasName.value = alias

    // 面板数据
    panels.value = [
        {
            title: '别名',
            value: aliasName.value,
            is_arrows: true
        },
        {
            title: '手机号',
            value: friend.value?.info.mobile,
            is_arrows: false
        },
        {
            title: '标签',
            value: '具体',
            url: '/setLabel'
        },
        {
            title: '描述',
            value: '查看',
            url: '/setLabel'
        },
        {
            title: '朋友权限'
        },
        {
            title: '朋友圈'
        },
        {
            title: '更多信息',
            url: '/friendMoreInfo'
        }
    ]
})

// ----------------- 获取好友信息开始 -----------------
// 是否拉黑
const isBlacklist = ref<boolean>(false)

// 获取好友信息
const friend = ref<Friend>()

const information = ref<Information>()

// 获取好友信息
const getFriendInfo = async () => {
    isSkeleton.value = true
    const result = await reqFriendDetailAPI(route.query.id as never)
    friend.value = result.data
    isBlacklist.value = friend.value?.status == -1 ? true : false

    // 处理好友资料数据
    friend.value?.information.forEach(item => {
        if (item.uid != userStore.profile.user.uid) {
            information.value = item
        }
    })

    isSkeleton.value = false
}
// ----------------- 获取好友信息结束 -----------------



// ----------------- 处理编辑别名开始 -----------------
// 控制显示弹层
const popupAlias = ref<boolean>(false)

// 别名数组,用于请求提交
const aliasItems = ref<Alias[]>([])

// 显示别名
const aliasName = ref<string>('')

// 当前用户别名
const myAlias = ref<Alias>()

// 处理显示编辑别名弹层
const handleShowEditAlias = () => {
    popupAlias.value = true
}

// 处理编辑别名弹层
const handleEditAlias = async () => {
    // 置空别名数据
    aliasItems.value = []

    // 追加好友别名数据
    aliasItems.value.push({
        uid: friend.value?.info.uid as never,
        name: aliasName.value
    })

    // 判断是否存在别人给我取了别名
    // 存在则追加到更新数据，反之则不追加
    if (myAlias.value?.uid) {
        aliasItems.value.push(myAlias.value)
    }

    // 请求修改别名
    await reqEditFriendAPI({id: friend.value?.id as never, alias: aliasItems.value})

    // 设置显示修改后的别名
    panels.value[0].value = aliasName.value

    showSuccessToast('编辑别名成功')

    // 关闭弹层
    popupAlias.value = false
}
// ----------------- 处理编辑别名结束 -----------------



// ----------------- 处理编辑星标开始 -----------------
// 延时器
const timer:any = ref(null)

// 星标、取消星标
const handleEditAsterisk = (type: string) => {
    // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(timer.value)
	// 重新启动延时器
	timer.value = setTimeout(async() => {
		await reqEditFriendAPI({id: route.query.id as never, uid: friend.value?.info.uid, is_asterisk: type})

        if (information.value?.is_asterisk) {
            information.value.is_asterisk = type
        }
        if (type == '1') {
            showSuccessToast('星标成功')
        } else {
            showSuccessToast('取消星标成功')
        }
	}, 500)
}
// ----------------- 处理编辑星标结束 -----------------



// ----------------- 处理删除好友开始 -----------------
const handleRemoveFriend = () => {
    showConfirmDialog({
		title:'提示',
		message:'确定要删除吗?',
		confirmButtonColor: '#27BA9B'
	}).then(async ()=>{
        await reqDeleteFriendAPI(friend.value?.id + '')
        showSuccessToast('删除成功')

        // 跳转首页
        setTimeout(() => {
			router.push({path: '/'})
		}, 1500)
	}).catch(() => {})
}
// ----------------- 处理删除好友结束 -----------------



// ----------------- 处理拉黑好友开始 -----------------
const handleBlacklist = async (value: boolean) => {
    const result = await reqBlacklistFriendAPI({
        ids: friend.value?.id + '',
        status: value ? -1 : 1
    })

    showSuccessToast(result.message)

    // 跳转首页
    setTimeout(() => {
        router.push({path: '/'})
    }, 1500)
}
// ----------------- 处理拉黑好友结束 -----------------
</script>

<style scoped lang="scss">
::v-deep(.van-skeleton) {
    padding: 0px 0px;
}

page,
.container {
    height: 100vh;

    // 骨架屏区域开始
    .skeleton-wrap {
        padding-top: 60px;
        .info-box {
            padding-left: 10px;
            width: 100%;
            display: flex;
            .info-left {
                width: 60px;
            }
            .info-right {
                flex: 1;
                display: flex;
                justify-content: space-between;
                .text {
                    flex: 1;
                    width: 200px;
                    margin-left: 20px;
                }
                .star {
                    width: 50px;
                }
            }
        }
        margin-bottom: 10px;
    }

    .skeleton-cell-wrap {
        .cell-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #e3e2e2;
            height: 55px;
        }
    }
    .skeleton-opt-wrap {
        .skeleton-opt {
            display: flex;
            margin-top: 10px;
            padding: 0 20px;
            width: 100%;
        }
    }

    // 骨架屏区域结束

    .info-wrap {
        padding-top: 60px;
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 15px;
        .left-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: 5px;
            border: 1px solid #e3e2e2;
        }
        .middle-box {
            flex: 1;
            padding-left: 20px;
            font-size: 14px;
            line-height: 26px;
            .username-panel {
                display: flex;
                align-items: center;

                font-size: 18px;
                color: #000;
                .icon-nan {
                    font-size: 18px;
                    color: #0747A6;
                    margin-left: 5px;
                }

                .icon-nv {
                    font-size: 18px;
                    color: #EE7458;
                    margin-left: 5px;
                }
            }
        }
        .right-box {
            .icon-shoucang {
                font-size: 24px;
                color: #FBC002;
            }
            .icon-shoucang1 {
                font-size: 24px;
                color: #e3e2e2;
            }
        }
    }

    .panel-wrap {
        margin-top: 10px;
        .operate-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 15px 10px;
            color: #000;
            border-bottom: 1px solid #f2f2f2;
            .left {
                font-size: 16px;
                flex: 1;
            }
            .right {
                width: 50px;
            }
        }
    }

    // 操作区域开始
    .opt-wrap {
        margin-top: 5px;
        .item-box {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #e3e2e2;
            color: #27BA9B;
            font-weight: bold;
            font-size: 14px;
            &:last-child {
                border-bottom: none;
            }
            .iconfont {
                font-size: 24px;
                padding-right: 4px;
            }
        }

        .btn-box {
            padding: 20px;
        }
    }

    // 编辑别名弹层区域开始
    .popup-wrap {
        .title-box {
            margin-top: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px
        }

        .btn-box {
            display: flex;
            justify-content: center;
            margin-top: 5px;
        }
    }
}
</style>